<template>
    <div class="app-container">
        教师添加
        <el-form ref="form"  label-width="80px">
            <el-form-item label="教师名称">
                <el-input v-model="teacher.name"></el-input>
            </el-form-item>

            <el-form-item label="教师排序">
                <el-input-number v-model="teacher.sort" placeholder="" controls-position="right" ></el-input-number>
            </el-form-item>

            <el-form-item label="教师职称">
                <el-select v-model="teacher.level" placeholder="请选择职称">
                    <el-option label="普通教师" :value="1"/>
                    <el-option label="高级教师" :value="2"/>
                </el-select>
            </el-form-item>

            <el-form-item label="教师语录">
                <el-input v-model="teacher.quotation"></el-input>
            </el-form-item>

            <el-form-item label="教师简介">
                <el-input 
                type="textarea" 
                :autosize="{ minRows: 10, maxRows: 12}" 
                v-model="teacher.introduce"></el-input>
            </el-form-item>

            <!--上传头像组件-->
            <el-form-item label="教师头像">
                <!--缩略图-->
                <pan-thumb :image="teacher.portrait" />
                <!--上传按钮-->
                <el-button type="primary" icon="el-icon-upload" @click="imageShow=true">更换头像</el-button>

                <!--
                    v-show:是否显示上传组件
                    :key:类似Id,多个图片上传控件，可标识
                    :url:后台上传的url地址
                    field:标识为 file
                    @close:关闭弹框的方法
                    @crop-upload-success:上传成功的方法
                -->
                <image-cropper 
                    v-show="imageShow"
                    :width="300"
                    :height="300"
                    :key="teacherPortrait"
                    :url="BASE_API+'/eduoss/fileoss'"
                    field="file"
                    @close="close"
                    @crop-upload-success="uploadSuccess"
                />
            </el-form-item>

            <el-form-item>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="onSubmit">立即添加</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>


<script>
import teacherApi from '@/api/teacher/teacher.js'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
    components:{ ImageCropper ,PanThumb},//声明引入的组件
    data(){
        return{
            teacher:{//存放教师信息
                //设置默认头像
                portrait:'https://mju-sdy.oss-cn-hangzhou.aliyuncs.com/defaultImg/u%3D132474057%2C1598106149%26fm%3D26%26gp%3D0.jpg'
            },
            saveBtnDisabled:false,//保存按钮禁用
            imageShow:false, //上传弹框组件是否显示
            teacherPortrait:0,//上传组件key值
            BASE_API: process.env.BASE_API//获取dev.env.js的值
        }
    },
    created(){
        this.init()
    },
    //路由监听
    watch:{
        //路由变化，以下方法执行
        $route(to,from){
            this.init()
        }
    },

    methods:{
        //初始化
        init(){
            //判断路径是否有id值
            if(this.$route.params && this.$route.params.id){
                //获取路径中id
                const id = this.$route.params.id
                //根据id调用查询方法
                this.getTeacherInfo(id)
            }else{
                //路径没有，清空数据
                this.teacher={}
            }
        },
        
        //提交
        onSubmit(){
            //判断是修改还是删除
            if(this.teacher.id){
                this.updateTeacher()
            }else{
                this.saveTeacher()
            }
        },

        //添加教师方法
        saveTeacher(){
            teacherApi.saveTeacher(this.teacher)
            .then(response =>{
                //提示成功
                this.$message({
                        type: 'success',
                        message: '添加成功!'
                });

                //返回列表
                //路由跳转
                this.$router.push({path:'/teacher/list'})

            }).catch(error =>{

            })
        },

        //根据教师id查找
        getTeacherInfo(id){
            teacherApi.getById(id)
            .then(response =>{
               this.teacher = response.data.datas
            })
        },

        //修改教师
        updateTeacher(){
            teacherApi.updateTeacher(this.teacher)
            .then(response =>{
                //提示成功
                this.$message({
                        type: 'success',
                        message: '修改成功!'
                });

                //返回列表
                //路由跳转
                this.$router.push({path:'/teacher/list'})
            })
        },

        //关闭上传弹框
        close(){
            this.imageShow=false;
            //上传组件初始化
            this.teacherPortrait = this.teacherPortrait + 1;
        },

        //上传成功方法
        uploadSuccess(data){
            this.imageShow=false;
            //上传组件初始化
            this.teacherPortrait = this.teacherPortrait + 1;
            this.teacher.portrait = data.url
        }
    }
}
</script>